<template>
  <div class="order-form">
    <van-nav-bar
      title="订单列表"
      fixed
      :placeholder="true"
      left-arrow
      @click-left="backRouter"
    >
      <template #left>
        <van-icon name="arrow-left" color="#a8a9aa" size="18" />
      </template>
    </van-nav-bar>
    <div class="tab-top">
      <van-tabs v-model="active">
        <van-tab name="CANCEL_PAY" title="取消订单"></van-tab>
        <van-tab name="WAITING_PAY" title="待支付"></van-tab>
        <van-tab name="WAITING_EVALUATE" title="待评价"></van-tab>
        <van-tab name="ALREADY_EVALUATE" title="已经评价"></van-tab>
        <van-tab name="ALREADY_PAY" title="已支付"></van-tab>
      </van-tabs>
    </div>
    <div class="tab-content">
      <template v-for="(item) in orderAll[active]" >
        <template>
          <order-item
            :key="item.orderId"
            :shopInfo="restaurant"
            :orderForStatus="item"
          ></order-item>
        </template>
      </template>
      <div class="no-more">没有更多了</div>
    </div>
  </div>
</template>

<script>
import orderItem from "@/components/orderForm/order-item.vue";
import { mapState } from "vuex";
import { getOrderList } from '@/api/orderApi';
export default {
  name: "orderForm",
  data() {
    return {
      active: 'CANCEL_PAY',
      orderAll: {
        CANCEL_PAY: [],
        WAITING_PAY: [],
        WAITING_EVALUATE: [],
        ALREADY_EVALUATE: [],
        ALREADY_PAY: []
      },
      restaurant: {}, // 店家信息
    };
  },
  components: {
    orderItem,
  },
  methods: {
    backRouter() {
      this.$router.go(-1);
    },
    async init() {
      const res = await getOrderList();
      // 获取所有订单类型信息, 并且分好类, 存储到orderAll中
      if (
        res.code !== 200
      ) {
        this.$notify({
          type: 'danger',
          message: '请先登录'
        });
        return;
      }
      // 设置店家信息
      this.restaurant = res.data.restaurant;
      // 进行分拣
      this.sortOut(res.data.briefOrderList, this.orderAll);
    },
    /**
     * 进行分拣, 根据所给结构进行分拣
     * @param {Array<Order>} data 数据源
     * @param {Object} construction 结构体
     */
    sortOut(data, construction) {
      Object.keys(construction).forEach((key) => {
        construction[key] = data.filter((order) => {
          return order.orderState === key;
        });
      });
    }
  },

  created() {
    this.init();
  },
  computed: {
    ...mapState("m_user", ["userInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.order-form {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f6f6f6;
}
.tab-top {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  // height: 45px;
}

.tab-content {
  flex-grow: 1;
  margin-top: 100px;
  padding-bottom: 10px;
  overflow: auto;
}

.no-more {
  margin-top: 10px;
  text-align: center;
  color: #929292;
  font-size: 14px;
}

::v-deep .van-nav-bar__content {
  height: 60px !important;
}

.van-nav-bar__placeholder {
  height: 0 !important;
}
</style>
